/* 请将此内容替换或合并到你的 category.wxss 文件中 */

// ===================================
// 主题变量定义 (不变)
// ===================================
@color-primary-text: #303133;
@color-regular-text: #606266;
@color-secondary-text: #909399;
@color-placeholder-text: #c0c4cc;
@color-theme: #19be6b;
@color-theme-dark: #18b566;
@color-danger: #f56c6c;
@color-warning: #f9ae3d;
@color-bg: #f8f8f8;
@color-border: #ebedf0;
@font-size-xl: 28rpx;
@font-size-lg: 26rpx;
@font-size-md: 24rpx;
@font-size-sm: 22rpx;

// ===================================
// 页面整体样式 (不变)
// ===================================
page {
	background-color: @color-bg;
	color: @color-regular-text;
	font-size: @font-size-lg;
	--td-button-primary-bg-color: #53e18b;
	--td-button-primary-active-bg-color: #909399;
	--td-button-primary-border-color: #53e18b;
	--td-button-primary-active-border-color: #909399;
	--td-button-light-text-color: #303133;
}

// ===================================
// 【重构】分类列表样式
// ===================================
.category-container {
	padding-bottom: 180rpx;
}

/* 覆盖 t-collapse 的默认边框 */
.t-collapse {
	border: none !important;
}

/* 覆盖 t-collapse-panel 的默认样式 */
.t-collapse-panel {
	/* 移除面板间的间隙 */
	margin-bottom: 0 !important;

	/* 移除内部 padding，由我们自己控制 */
	.t-collapse-panel__content {
		padding: 0 !important;
		background-color: #fdfdfd; // 给子列表一个稍有区分的背景色
	}
}

/* 父分类头部样式 (用于 header slot) */
.category-item-header {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

/* 子分类项样式 */
.category-item.child-item {
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx 24rpx 100rpx;
	/* 左侧增加缩进 */
	border-bottom: 1rpx solid @color-border;
	transition: background-color 0.2s;

	&:active {
		background-color: #f5f5f5;
	}

	&:last-child {
		border-bottom: none;
	}
}

/* 子分类容器 */
.child-list-container {
	.no-children-tip {
		font-size: @font-size-sm;
		color: @color-secondary-text;
		text-align: center;
		padding: 24rpx 0;
	}
}

/* 内容和操作区的通用样式 */
.item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* 防止 flex 布局溢出 */
}

.name-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.category-name {
	font-size: @font-size-xl;
	color: @color-primary-text;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.van-tag {
	margin-left: 12rpx;
	flex-shrink: 0;
}

.category-remark {
	font-size: @font-size-sm;
	color: @color-secondary-text;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-actions {
	display: flex;
	align-items: center;
	gap: 20rpx;
	flex-shrink: 0;
	/* 防止操作按钮被 flex 压缩 */
}

.action-btn {
	font-size: @font-size-md;
	color: @color-theme-dark;
	padding: 8rpx 12rpx;

	&.danger {
		color: @color-danger;
	}

	&.warn {
		color: @color-warning;
	}
}

.disabled .category-name,
.disabled .category-remark {
	color: @color-secondary-text;
	text-decoration: line-through;
}

// ===================================
// 悬浮按钮和表单弹窗 (不变)
// ===================================

.disabled {
	opacity: .3;
	color: #303133;
}

.form-popup {
	.popup-header {
		font-size: @font-size-xl;
		font-weight: bold;
		text-align: center;
		padding: 32rpx;
		color: @color-primary-text;
		border-bottom: 1rpx solid @color-border;
	}

	.form-content {
		padding: 30rpx;
		width: 93vw;
		box-sizing: border-box;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.item-label {
		font-size: @font-size-lg;
		color: @color-regular-text;
		margin-bottom: 16rpx;
	}

	.label-tip {
		color: @color-secondary-text;
		font-size: @font-size-sm;
		margin-left: 10rpx;
	}

	input,
	textarea {
		width: 100%;
		padding: 18rpx 20rpx;
		background-color: @color-bg;
		border-radius: 8rpx;
		font-size: @font-size-lg;
		color: @color-primary-text;
	}

	.unit-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 20rpx;
		background-color: @color-bg;
		border-radius: 8rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.van-icon {
		color: @color-secondary-text;
	}

	.placeholder {
		color: @color-placeholder-text;
	}

	.popup-footer {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 30rpx;
		gap: 20rpx;
		border-top: 1rpx solid @color-border;
	}

	.van-button {
		flex: 1;
	}
}